<template>
  <div id="ImportEmployeeNew">
    <el-header class="headerTop">
      <span class="hoverToBlue ClickText" @click="goback('go')">返回</span>
      <div class="headerTop_count">
        <span class="header_title" :class="{ header_title_active: active == 0 }">① 上传文件</span>
        <span class="line"></span>
        <span class="header_title" :class="{ header_title_active: active == 1 }">② 匹配表头字段</span>
        <span class="line"></span>
        <span class="header_title" :class="{ header_title_active: active == 2 || active == 3 }">③ 完成</span>
        <span class="line"></span>
      </div>
    </el-header>
    <div class="area area1" v-show="active == 0">
      <uploadExcel ref="uploadExcel" :isMoreListEdit="isMoreListEdit" @getFile="getFile" :file="fileExcel" :isEdit="isEdit" :moduleCode="moduleCode" v-if="reloadStatus"></uploadExcel>
    </div>
    <div class="area area2" v-show="active == 1">
      <matchingFields :file="fileExcel" ref="fields" @setRowIndex="setRowIndex" :isEdit="isEdit" @fileCacheKey="fileCacheKeyValue" :moduleCode="moduleCode"></matchingFields>
    </div>
    <div class="area area3" v-show="active == 2">
      <checkTabels :moduleCode="moduleCode" :fileCacheKey="fileCacheKey" @activeChange="activeChange" :isEdit="isEdit" :attributes="attributes" :systemAttribute="systemAttribute" :resData="resData" ref="checkTabels" @closeLoading="closeLoading"></checkTabels>
    </div>
    <div class="area area4" v-show="active == 3">
      <importOver :resData="resData" @reload="reload" :isEdit="isEdit" :moduleCode="moduleCode" @activeChange="activeChange"></importOver>
    </div>
    <div class="footer">
      <el-button type="default" v-if="active == 0" @click="goback()">取消</el-button>
      <el-button type="default" v-if="active == 1 || active == 2" @click="active--">上一步</el-button>
      <el-button type="primary" v-if="active == 0 || active == 1" @click="next">下一步</el-button>
      <el-button type="primary" v-if="active == 2" @click="next">继续导入</el-button>
      <el-button type="primary" v-if="active == 3" @click="goback()">完成</el-button>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import uploadExcel from "./ImportEmployeeComponents/uploadExcel.vue";
import matchingFields from "./ImportEmployeeComponents/matchingFields.vue";
import checkTabels from "./ImportEmployeeComponents/checkTabels.vue";
import importOver from "./ImportEmployeeComponents/importOver.vue";
import { Loading } from "element-ui";
export default {
  name: "importEmployeeAdd",
  components: {
    uploadExcel,
    matchingFields,
    checkTabels,
    importOver,
  },
  data() {
    return {
      //导入的模块
      moduleCode: 0,
      //Excel文件
      fileExcel: null,
      fileCacheKey: "",
      //所有列
      Column: {},
      active: 0,
      tableData: [],
      //area2加载时间
      area2Loding: true,
      //Excel字段
      attributes: [],
      //系统字段(下拉列表)
      systemAttribute: [],
      //导入状态
      resData: {},
      area4Loding: false,
      isEdit: false,
      loadingInstance: {},
      rowIndex: 1,
      isMoreListEdit: false,
      reloadStatus: true,
    };
  },
  created() {
    if (this.$route.query.type == 2) {
      this.isEdit = true;
      this.isMoreListEdit = true;
    }
  },
  mounted() {
    this.moduleCode = Number(this.$route.query.moduleCode ?? 0);
    if (this.moduleCode != 0) {
      this.isEdit = true;
    }
  },
  activated() {
    console.log(this.active, "active");
  },
  destroyed() {
    console.log("页面销毁");
  },
  methods: {
    reload() {
      this.active = 0;
      this.fileExcel = null;
      this.$nextTick(() => {
        this.reloadStatus = false;
        this.reloadStatus = true;
        this.$refs.uploadExcel.reloadExcel();
      });
    },
    setRowIndex(value) {
      this.rowIndex = value;
    },
    fileCacheKeyValue(value) {
      this.fileCacheKey = value;
    },
    closeLoading() {
      this.loadingInstance.close();
    },
    activeChange(active) {
      if (active == 0) {
        this.fileExcel = null;
      }
      this.active = active;
    },
    goback(type) {
      // 客户 返回
      if (type == "go") {
        this.$confirm("您正在进行导入操作,确认返回吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          this.$store.commit("DEL_TAG", this.tagCurrent);
          this.$router.push({ name: "employeeList" });
        });
      } else {
        this.$store.commit("DEL_TAG", this.tagCurrent);
        this.$router.push({ name: "employeeList" });
      }
    },
    async next() {
      //上传文件完成进行第二步
      if (this.active == 0) {
        if (!this.fileExcel) {
          this.$message.warning("请选择文件后进行下一步操作");
          return;
        }
        this.$refs.fields.getAttributes();
      } else if (this.active == 1) {
        this.loadingInstance = Loading.service({ target: document.getElementById("ImportEmployeeNew"), fullscreen: false });
        //匹配完字段进行第三步
        //处理系统字段,处理为同级
        let tempData = this.$refs.fields.getfield();
        for (let i = 0; i < tempData.systemAttribute.length; i++) {
          let moduleColumns = tempData.systemAttribute[i].Columns;
          for (let j = 0; j < moduleColumns.length; j++) {
            let column = moduleColumns[j];
            if (column.isRequire) {
              if (!tempData.attributes.find((m) => m.systemAttribute == column.id)) {
                this.$message.warning(`必选项【${column.name}】未选择`);
                this.loadingInstance.close();
                return;
              }
            }
          }
        }
        // for (let i = 0; i < tempData.attributes.length; i++) {
        //   let Column = tempData.attributes[i];
        //   if (Column.isRequire && !Column.systemAttribute) {
        //     this.$message.warning(`必选项【${Column.name}】未选择`);
        //     this.loadingInstance.close();
        //     return;
        //   }
        // }
        this.attributes = JSON.parse(JSON.stringify(tempData.attributes));
        this.systemAttribute = JSON.parse(JSON.stringify(tempData.systemAttribute));
        // this.$refs.checkTabels.getData();
      } else if (this.active == 2) {
        this.loadingInstance = Loading.service({ target: document.getElementById("ImportEmployeeNew"), fullscreen: false });
        let data = this.$refs.checkTabels.ConfirmImportData();
        let action = this.moduleCode != 0 ? this.isMoreListEdit ? "ComfirmEditImport" : "ComfirmInsertImport" : this.isEdit ? "ComfirmEditImport" : "ComfirmInsertImport";
        await this.$api.importUser[action]({ data, moduleCode: this.moduleCode })
          .then((res) => {
            if (res.data.status == 200) {
              this.resData = res.data.data;
            } else {
              return;
            }
            this.loadingInstance.close();
          })
          .catch((err) => {
            this.loadingInstance.close();
          });
      }
      this.active++;
    },
    //获取file
    getFile(file) {
      this.fileExcel = file;
    },
  },

  computed: {
    ...mapState({
      tagCurrent: (state) => state.tag.tagCurrent,
    }),
  },
};
</script>

<style lang="less" scoped>
#ImportEmployeeNew {
  .headerTop {
    // header
    box-shadow: 0px 0px 15px 1px #c2c3c7;
    position: relative;
    z-index: 100;
    height: 50px !important;

    > span {
      float: left;
      line-height: 50px;
      text-decoration: underline;
      font-size: 14px;
    }

    .headerTop_count {
      width: 100%;
      text-align: center;
    }

    .header_title {
      display: inline-block;
      height: 50px;
      line-height: 50px;
      font-size: 14px;
      width: 15%;
      min-width: 80px;
      text-align: center;
    }

    .header_title_active {
      color: #39a4ed;
      border-bottom: 2px solid #39a4ed;
    }
    .hoverToBlue {
      color: #39a4ed;
    }

    .line {
      // width: 20%;
      width: 6%;
      margin: 0 5px;
      display: inline-block;
      // border-bottom: 1px dashed #39A4ED;
      position: relative;
      top: -4px;
    }
  }
  .area {
    width: 100%;
    height: 87%;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
  }
  .area3 {
    justify-content: flex-start;
    height: calc(~"100%-100px");
  }
  .footer {
    background-color: white;
    border-top: 1px solid #c2c3c7;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    position: absolute;
    left: 10px;
    bottom: 9px;
    width: 98.5%;
    padding: 6px;
    .el-button {
      margin-right: 15px;
      width: 90px;
      height: 35px;
    }
  }
}
</style>
